<template>
  <div class="app-container home-wrap">
  </div>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import BarChart from './dashboard/BarChart'
  import BarChart2 from './dashboard/BarChart2'

  export default {
    name: "Index",
    components: {
      BarChart,
      BarChart2
    },
    data() {
      return {
        loading: null
      };
    },
    mounted() {
    },
    methods: {
    },
  };

</script>

<style lang="scss">
  .home-wrap {
    .message-box {
      height: 300px;
      overflow: hidden;
      overflow-y: auto;

      ul {
        margin: 0;
        padding: 0
      }

      li {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px dashed #ddd;
        line-height: 25px;
        font-size: 12px;
        padding-top: 5px;
        cursor: pointer;
        text-align: justify;

        span {
          color: #999;
          font-size: 12px;
          white-space: nowrap;
          float: right;
        }

        &:hover {
          color: #1890ff;

          span {
            color: #1890ff;
          }
        }
      }
    }

    .tab-radio {
      position: relative;
      flex: 2;

      .el-radio-group {
        position: absolute;
        left: 0;
        top: 0;
      }

      .el-radio {
        height: 29px;
        line-height: 22px;



        .el-radio__input {
          display: none;
        }

        .el-radio__label {
          padding-left: 0;
          color: #888;
        }

        &.is-checked {
          border-bottom: 2px solid #1890ff;

          .el-radio__label {
            color: #1890ff;
          }
        }
      }
    }

    .data-search {
      display: flex;
      flex: 2;
      padding-left: 30px;
      line-height: 25px;

      label {
        padding-right: 10px;
        font-size: 14px;
        font-weight: normal;
      }
    }

    .shujubox {
      min-height: 300px;
    }

    .card-panel-col {
      margin-bottom: 10px;
      padding-right: 10px;
      min-width: 330px;
    }

    .card-panel {
      height: 105px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border: solid 1px #e6ebf5;
      border-radius: 4px;

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 28px 26px;
        line-height: 45px;
        margin-left: 0px;
      }
    }

    .unittip {
      font-size: 14px;
    }
  }

</style>
